import React, { useState, useEffect } from 'react';
import { NavLink, Route, Redirect } from 'react-router-dom';
import { Button, Modal, Input } from 'antd';
import { EditOutlined, DeleteFilled } from '@ant-design/icons';
import { findCoupon, findClassify, deleteClassify, addClassify } from '../../api/vip';
import Crumbs from '../../components/crumbs/index';
import './scss/coupons.scss'
// import '//at.alicdn.com/t/font_1381661_22rfkn1n4l6.css'
const Coupons = (props) => {
    const [CrumbsList] = useState([
        {
            name: '优惠管理',
        },
        {
            name: '优惠劵管理',
            url: '/coupons',
        },
    ]);

    return (
        <div>
            <Redirect path="/coupons" to='/coupons/mx' />
            <Crumbs CrumbsList={CrumbsList} />
            <div className='coupons_topBox'>
                <NavLink className='coupons_tab' activeClassName='active_tab' to="/coupons/mx">优惠劵明细</NavLink>
                <NavLink className='coupons_tab' activeClassName='active_tab' to="/coupons/jl">发送记录</NavLink>
                <NavLink className='coupons_tab' activeClassName='active_tab' to="/coupons/fl">优惠劵分类</NavLink>
                <NavLink className='coupons_tab' activeClassName='active_tab' to="/coupons/sz">优惠劵设置</NavLink>
            </div>
            <div>
                <Route path='/coupons/mx' component={() => {

                    const [tabList, setTabList] = useState([])
                    useEffect(() => {
                        findCoupon().then((res) => {
                            if (res.code === 200) {
                                setTabList(res.data)
                            } else {
                                alert(res.msg)
                            }
                        })
                    }, [])
                    return (
                        <div className='mx_box'>
                            <div>
                                <NavLink to="/add/ADiscounts">
                                    <Button>添加新优惠券</Button>
                                </NavLink>
                            </div>
                            <div className='mx_table'>
                                <table border="1">
                                    <thead className='mx_thead'>
                                        <tr>
                                            <th>优惠券ID</th>
                                            <th>发放时间</th>
                                            <th>结束时间</th>
                                            <th>发放数量</th>
                                            <th>使用条件</th>
                                            <th>优惠项目</th>
                                            <th>剩余数量</th>
                                        </tr>
                                    </thead>
                                    <tbody className='mx_tbody'>
                                        {
                                            tabList.map((item, index) => {
                                                return (
                                                    <tr key={index}>
                                                        <td>00{item.id}</td>
                                                        <td>{item.start}</td>
                                                        <td>{item.end}</td>
                                                        <td>{item.amount}</td>
                                                        <td>{item.conditions}</td>
                                                        <td>{item.disc}</td>
                                                        <td>{item.quantity}</td>
                                                    </tr>
                                                )
                                            })
                                        }


                                    </tbody>
                                </table>
                            </div>
                        </div>
                    )
                }} />
                <Route path='/coupons/jl' component={() => {
                    const [tabList, setTabList] = useState([])
                    useEffect(() => {
                        findCoupon().then((res) => {
                            if (res.code === 200) {
                                setTabList(res.data)
                            } else {
                                alert(res.msg)
                            }
                        })
                    }, [])
                    return (
                        <div className='mx_box'>
                            <div className='mx_table'>
                                <table border="1">
                                    <thead className='mx_thead'>
                                        <tr>
                                            <th>优惠券ID</th>
                                            <th>发放时间</th>
                                            <th>结束时间</th>
                                            <th>发放数量</th>
                                            <th>使用条件</th>
                                            <th>优惠项目</th>
                                            <th>剩余数量</th>
                                        </tr>
                                    </thead>
                                    <tbody className='mx_tbody'>
                                        {
                                            tabList.map((item, index) => {
                                                return (
                                                    <tr key={index}>
                                                        <td>00{item.id}</td>
                                                        <td>{item.start}</td>
                                                        <td>{item.end}</td>
                                                        <td>{item.amount}</td>
                                                        <td>{item.conditions}</td>
                                                        <td>{item.disc}</td>
                                                        <td>{item.quantity}</td>
                                                    </tr>
                                                )
                                            })
                                        }
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    )
                }} />
                <Route path='/coupons/fl' component={() => {
                    const [isModalVisible, setIsModalVisible] = useState(false);
                    const [tabList, setTabList] = useState([])
                    const [value, setValue] = useState('')
                    useEffect(() => {
                        findClassify().then((res) => {
                            if (res.code === 200) {
                                setTabList(res.data)
                            } else {
                                alert(res.msg)
                            }
                        })
                    }, [])
                    const isDelete = (id) => {
                        deleteClassify({ id }).then((res) => {
                            setTabList(res.data)
                        })
                    }
                    const addMx = () => {
                        setIsModalVisible(true)
                    }

                    const handleOk = () => {
                        setIsModalVisible(false);

                        addClassify({ value }).then((res) => {
                            setTabList(res.data)
                        })
                    };

                    const handleCancel = () => {
                        setIsModalVisible(false);
                    };
                    const titTran = (event) => {
                        setValue(event.target.value);
                    }
                    return (
                        <div className='mx_box'>
                            <div>
                                <Button onClick={addMx}>添加优惠券分类</Button>
                                <Modal title="添加分类" bodyStyle={{ backgroundColor: "#Fff" }} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                                    <div>
                                        <span>分类名称</span>
                                        <Input onChange={titTran} value={value} />
                                    </div>
                                </Modal>
                            </div>
                            <div className='mx_table'>
                                <table border="1">
                                    <thead className='mx_thead'>
                                        <tr>
                                            <th>ID</th>
                                            <th>标题</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody className='mx_tbody'>
                                        {
                                            tabList.map((item, index) => {
                                                return (
                                                    <tr key={index}>
                                                        <td>00{item.id}</td>
                                                        <td>{item.tit}</td>
                                                        <td>
                                                            <div className='mx_bj'>
                                                                <EditOutlined className='EditOutlined' />
                                                                <DeleteFilled className='DeleteFilled' onClick={() => isDelete(item.id)} />
                                                            </div>
                                                        </td>
                                                    </tr>
                                                )
                                            })
                                        }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    )
                }} />
            </div>
        </div>
    )
}

export default Coupons;